<template>
    <div>
        <div>
            <div class="flex align-center pb-6 mt-6">
                <el-avatar :src="data.author.avatar" size="large"></el-avatar>
                <div class="pl-8">
                    <div>
                        <span class="color-333">{{data.author.name}}</span>
                        <span class="color-999">(ID:{{data.author.id}})</span>
                    </div>
                    <div :title="data.desc" class="color-666 mt-4 text-line1">{{data.desc}}</div>
                </div>
            </div>

            <div class="position-relative">
                <video :id="'player'+data.live_id" height="300" playsinline preload="auto" webkit-playsinline width="300"></video>
                <div class="detail-button">
                    <el-button @click="toDetails(data)" plain type="primary">查看详情</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TCPlayer from 'tcplayer.js'
import 'tcplayer.js/dist/tcplayer.min.css'
export default {
    props: {
        data: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            player: null,
            play_url: null,
        }
    },
    mounted() {
        this.getStream()
    },
    methods: {
        toDetails(item) {
            this.$router.push({ path: '/live-broadcast-details?id=' + item.user_id + '&room_id=' + item.room_id + '&status=' + item.status })
        },
        getStream() {
            this.$request.get('/live/stream_url', { room_id: this.data.room_id }).then((res) => {
                this.play_url = res.url
                this.$nextTick(() => {
                    this.player = TCPlayer('player' + this.data.live_id, {
                        sources: [
                            {
                                src: res.url,
                            },
                        ],
                        licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1320915382_1/v_cube.license',
                        playbackRates: [],
                        autoplay: true,
                        muted: true,
                    })
                })
            })
        },
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
        this.$nextTick(() => {
            
            this.player = null
            this.play_url = ''
        })
    },
}
</script>

<style lang="scss" scoped>
#player {
    background: #333;
    width: 300px;
    height: 300px;
}
.detail-button {
    position: absolute;
    top: 4px;
    right: 42px;
    display: flex;
    justify-content: center;
    z-index: 100;
}
</style>